{%- comment -%}
    Renders an article card for a given blog with settings to either show the image or not.

    Accepts:
    - article: {Object} Article object
    - cards_color: {String} 卡片背景色
    - posts_per_row: {String} 一行最多展示的博客数量
    - show_featured_image: {String} 是否展示博客封面
    - show_date: {String} 是否展示发布日期
    - show_author: {String} 是否展示作者
    - show_excerpt: {String} 是否展示摘要
    - show_button: {String} 是否展示博客超链接按钮

    Usage:
    {% render 'featured-blog-card', 
      article: article, 
      cards_color: 'dark'
      posts_per_row: '2', 
      show_featured_image: section.settings.show_featured_image, 
      show_date: section.settings.show_date, 
      show_author: section.settings.show_author, 
      show_excerpt: section.settings.show_excerpt, 
      show_button: section.settings.show_button
    %}
{%- endcomment -%}
{%- liquid
  if posts_per_row == '2'
    assign img_sizes = '(min-width: 1264px) 588px, (min-width: 1024px) 468px, (min-width: 768px) 348px, (min-width: 600px) 45vw, calc(100vw - 32px)'
  elsif posts_per_row == '3'
    assign img_sizes = '(min-width: 1264px) 384px, (min-width: 1024px) 304px, (min-width: 768px) 348px, (min-width: 600px) 45vw, calc(100vw - 32px)'
  endif

  if cards_color == 'white'
    assign card_bg_style = 'card-bg-light'
    assign card_text_color = 'card-text-dark'
    assign card_btn_style = 'primary'
  else
    assign card_bg_style = 'card-bg-dark'
    assign card_text_color = 'card-text-light'
    assign card_btn_style = 'light'
  endif
-%}

<article class="blog-posts-card h-100" aria-labelledby="article-{{ section.id }}-{{ article.id }}">
  <div class="card border-0 h-100 {{ card_bg_style }} {{ card_text_color }}">
    {%- if article != blank -%}
    <a {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} class="stretched-link" href="{{ article.url }}"></a>
    {%- endif -%}

    <div class="row flex-lg-column h-100">
      {%- if show_featured_image == true -%}
        {%- if article != blank -%}
          {%- if article.image -%}
            <div class="col-12">
              <div class="ratio" style="--se-aspect-ratio: {{ 1 | divided_by: 1.5 | times: 100 }}%;">
                {{ article.image.src | image_url: width: article.image.width | image_tag: loading: "lazy", class: "object-fit-cover img-fluid card-img-top", sizes: img_sizes }}
              </div>
            </div>
          {%- endif -%}
        {%- else -%}
          <div class="col-12">
            <div class="ratio object-fit-cover border card-img-top" style="--se-aspect-ratio: {{ 1 | divided_by: 1.5 | times: 100 }}%;">
              {{ 'image' | placeholder_svg_tag }}
            </div>
          </div>
        {%- endif -%}
      {%- endif -%}
      <div class="d-flex flex-grow-1 flex-column col-12 py-3 py-lg-4">
        <div class="card-body px-3 px-lg-4 py-0">
          <div class="mb-1 fs-footnote post-author-date">
            {% render 'article-author-date-tag',
              article: article,
              show_author: show_author,
              show_date: show_date
            %}
          </div>
          
          <div class="position-relative">
            {%- if article != blank -%}
              <h3 class="mb-0 fw-bold lead post-title" id="article-{{ section.id }}-{{ article.id }}">{{ article.title | escape }}</h3>
            {%- else -%}
              <h3 class="mb-0 fw-bold lead post-title" id="article-{{ section.id }}-{{ article.id }}">{{ 'sections.blog_posts.onboarding_title' | t }}</h3>
            {%- endif -%}

            {%- if show_excerpt -%}
              {%- if article != blank -%}
                {%- if article.excerpt.size > 0 -%}
                <p class="mt-1 mb-0 ellipsis-3 post-content">
                  {{ article.excerpt | strip_html | truncatewords: 60 }}
                </p>
                {%- endif -%}
              {%- else -%}
                <p class="mt-1 mb-0 ellipsis-3 post-content">{{ 'sections.blog_posts.onboarding_content' | t }}</p>
              {%- endif -%}
            {%- endif -%}
          </div>
        </div>
        
        {%- if show_button and article != blank -%}
        <div class="d-flex mt-4 px-3 px-lg-4">
          <a class="post-link position-relative btn btn-link link-{{ card_btn_style }}" {% if article.url contains 'https://' %} target="_blank" rel="nofollow" {% endif %} href="{{ article.url }}">{{ 'sections.blog_posts.read_more' | t }}</a>
        </div>
        {%- endif -%}
      </div>
    </div>
  </div>
</article>
